前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

上一章我们认识并且开发了一个简单的渲染引擎。我们了解到渲染引擎主要负责数据可视化中的绘制部分,而接下来的比例尺(Scale),是就负责数据处理部分了。

img

比例尺是可视化中一个很重要且有用的抽象,主要用于将数据的某一个属性映射为图形的视觉属性,比如名字属性映射图形的颜色属性,身高属性映射为图形的位置属性。

在 数据分析模型那一章的最后我们提到,在设计一个可视化方案的时候,其中一个强有力的手段是“编码”,而编码就是通过比例尺完成。不同的数据需要不同的的编码方式,如何根据当前的数据选择合适的比例尺就是我们在可视化中遇见的一个常见的挑战。

同时比例尺也是我们在使用一些图表库中比较难以理解、容易引起困惑的部分,比如有如下常见的问题:

  • 为啥最后坐标轴生成的刻度的数量和希望的不一样?
  • nice 到底有什么用?
  • Threshold, Quantile, Quantile 比例尺有什么区别?

为了帮助大家更好的理解上面的这些问题,同时也为了给 Sparrow 提供数据映射的能力,我们接下来先从比例尺理论讲起,从根本上理解比例尺,然后通过实战加深对其理解,最后通过拓展去了解更多和比例尺相关的东西。

# 比例尺理论

比例尺的概念其实早就藏在我们的日常生活中了,比如我们有度量长度的比例尺:把空间上的一段距离映射为一个数字,有度量重量的比例尺:把一定重量映射为一个数字。

而在可视化中的比例尺,就是用来度量数据属性的,将数据抽象的属性映射为一个视觉属性。这决定了我们如何理解图形的颜色、大小、形状和位置等。选择一个比例尺的时候,需要我们去思考度量的是什么以及这些度量的含义,最终这些选择将决定我们如何理解一个图形。

比如我们希望用点来代表某个数据集中的每一条数据,数据中有 sex 这一个属性,对应有两个值:male 和 female。我们选择用点的颜色去度量 sex 这个数据属性,如果一条数据的 sex 属性是 male 那么对应的点是红色,否者是绿色。所以在理解每一个点的时候,如果这个点是红色,那么它对应的数据的 sex 属性就是 male,否者就是 female。

如果用代码把上面的功能如下描述:

function scale(value) {
  return value === 'male' ? 'red': 'green';
}

scale('male'); // 'red'
scale('female'); // 'green'
@前端进阶之旅: 代码已经复制到剪贴板

上面的代码非常的简单,但是通用性太差,只适用于这个特例。有没有什么通用的办法呢?当然是有的。

其实不难发现,比例尺本质上是一个函数,会将一个值(变量)从一个特定的范围(定义域)映射到另一个特定的范围(值域)。定义域(Domain)是由数据的属性决定,值域(Range)是由图形的视觉属性决定。根据定义域和值域的不同,我们需要选择不同的比例尺。

上面的 sex 和 颜色都是分类属性,所以会使用到我们之后要介绍的 Ordinal 比例尺,具体的使用方式如下。

// 根据 options 返回一个函数
const scale = createOrdinal({
  domain: ['male', 'female'], // 定义域
  range: ['red', 'green'], // 值域
});

scale('male'); // 'red'
scale('female'); // 'green'
@前端进阶之旅: 代码已经复制到剪贴板

那么接下来我们就来看看不同的比例尺,分别了解它们的定义域和值域的类型、映射规则和使用场景。

# Identity

我们首先看一个最简单的比例尺:Ident

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏